<!--
 * @Author: wangyu
 * @Date: 2024-12-26 10:48:09
 * @LastEditTime: 2024-12-26 12:04:08
 * @LastEditors: wangyu
 * @Description: 统计数量
 * @FilePath: \dzsq-smartpark-platform\src\views\overview\components\statistic-num.vue
-->
<template>
  <div class="statisticNum">
    <div :style="{ color: color }">{{ props.title }}</div>
    <div class="list">
      <div
        v-for="item in list"
        :key="item"
        :style="{ color: color, borderColor: color }"
      >
        <div :class="item !== ',' ? 'list-item' : 'list-dh'">
          <div>
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { formatNumber } from "@/utils/index.js";

const props = defineProps({
  title: String,
  color: String,
  data: Object,
});
const list = computed(() => {
  return formatNumber(props.data.value);
});
</script>
<style scoped lang="scss">
.statisticNum {
  width: 100%;
  font-size: 16px;
  .list {
    display: flex;
    font-size: 28px;
    font-weight: bold;
    margin-top: 10px;
    .list-item {
      width: 42px;
      height: 51px;
      line-height: 51px;
      margin-right: 5px;
      border: 1px solid;
      border-radius: 5px;
      float: right;
      text-align: center;
    }
    &-dh {
      position: relative;
      width: 24px;
      height: 51px;
      text-align: center;
      > div {
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
